import React, { Component } from 'react';
import {
  Text,
  TextInput,
  View,
  StyleSheet,
  TouchableOpacity,
  TouchableHighlight,
  Button,
} from 'react-native';
import Platform from 'Platform';
import * as defaultStyles from '../constants/DefaultStyles';
import { Actions } from 'react-native-router-flux';

export default class ForgetPwdContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      btnDisable: true,
      inputText: '',
    };
  }
  _changeBtnState(text: string) {
    this.state.inputText = text;
    if (text.length > 0) {
      this.setState({
        btnDisable: false,
      })
    }
    else {
      this.setState({
        btnDisable: true,
      })
    }
  }
  render() {
    return (
      <View style={{flex: 1, backgroundColor: defaultStyles.WHITEOFBACKGROUND}}>
        <View style={styles.topView}>
          <TouchableOpacity onPress={() => Actions.pop()}>
            <Text style={styles.backBtn}>{'<'}</Text>
          </TouchableOpacity>
          <Text style={styles.title}>找回密码</Text>
        </View>
        <View style={styles.textView}>
          <TextInput style={styles.textInput} placeholder={'请输入商户号或手机号'}
                     underlineColorAndroid={'transparent'} onChangeText={(text) =>
                     this._changeBtnState(text)}
          />
        </View>
        <Text style={styles.text}>商户请输入商户号，收银员请输入手机号</Text>
        <TouchableHighlight style={[styles.nextStepBtn,
        {backgroundColor: this.state.btnDisable === true ? 'rgba(47, 60, 254, 0.3)' : 'blue'}]}
                            disabled={this.state.btnDisable}>
          <Text style={{color: 'white', fontSize: 15}}>下一步</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  topView: {
    flexDirection: 'row',
    marginTop: Platform.OS === 'ios' ? 20 : 0,
    backgroundColor: defaultStyles.LIGHTBLUE,
    height: 44,
    justifyContent: 'center',
  },
  backBtn: {
    flex: 1,
    marginLeft: 10,
    marginTop: 4,
    fontSize: 26,
    color: 'white',
    height: 26,
    alignSelf: 'center',
  },
  title: {
    flex: 5,
    color: 'white',
    fontSize: 18,
    alignSelf: 'center',
    marginLeft: defaultStyles.SCREENWIDTH / 2 - 62,
  },
  textView: {
    marginTop: 20,
    backgroundColor: 'white',
  },
  textInput: {
    marginLeft: 15,
    marginRight: 15,
    height: 45,
  },
  text: {
    marginTop: 10,
    marginLeft: 15,
    marginRight: 15,
    height: 25,
    fontSize: 13,
    color: '#B8B8B8',
  },
  nextStepBtn: {
    marginTop: 10,
    marginLeft: 15,
    marginRight: 15,
    height: 40,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
})